<template>
	<div class="workable-workableResult-container">
		<el-dialog title="节点执行结果详情" v-model="isShowDialog" >
			<el-form ref="detailWorkableResultFormRef" :model="formData" size="small">
				<el-row>
					<div class="workable-result-label">追踪标识：</div>
					<div class="monitor-operlog-info">{{ formData.traceId }}</div>
				</el-row>
				<el-divider class="monitor-operlog-divider"></el-divider>
				<el-row>
					<div class="workable-result-label">任务名称：</div>
					<div class="monitor-operlog-info" v-if="formData.taskName" >{{ formData.taskName }}</div>
					<div class="monitor-operlog-info" v-else >{{ formData.taskId }}</div>
				</el-row>
				<el-divider class="monitor-operlog-divider"></el-divider>
				<el-row>
					<div class="workable-result-label">节点名称：</div>
					<div class="monitor-operlog-info" v-if="formData.nodeName" >{{ formData.nodeName }}</div>
					<div class="monitor-operlog-info" v-else >{{ formData.nodeId }}</div>
				</el-row>
				<el-divider class="monitor-operlog-divider"></el-divider>
				<el-row>
					<div class="workable-result-label">执行状态：</div>
					<div class="monitor-operlog-info">
						<span v-if="formData.status" class="color-success">正常</span>
						<span v-else class="color-danger">异常</span>
					</div>
				</el-row>
				<el-divider class="monitor-operlog-divider"></el-divider>
				<el-row>
					<div class="workable-result-label">消息内容：</div>
					<div class="monitor-operlog-info">{{ formData.message }}</div>
				</el-row>
				<el-row v-if="formData.content">
					<json-viewer v-if="contentIsJson" :value="formData.content" :expand-depth="4"></json-viewer>
					<div v-else class="monitor-operlog-info">{{ formData.content }}</div>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { getWorkableResult } from '/@/api/workable/result/index';
export default {
	name: 'workable/result/detail',
	components: { },
	setup() {
		const detailOperlogFormRef = ref();
		const state = reactive({
			isShowDialog: false,
			formData: {},
			contentIsJson : false
		});

		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			if(row){
				getWorkableResult({id: row.id}).then(res => {
					if(res.code == 0){
						state.formData = Object.assign({}, res.data);
						try {
							state.contentIsJson = false;
							if(state.formData.content){
								state.formData.content = JSON.parse(state.formData.content);
								state.contentIsJson = true;
							}
						} catch(e) {}
					}
				})
			}
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			state.contentIsJson = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			detailOperlogFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		return {
			detailOperlogFormRef,
			openDialog,
			closeDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.monitor-operlog-container{
	width: 100%;
	.monitor-operlog-divider{
		margin: 10px 0;
	}
	.workable-result-label {
		width: 110px;
		line-height: 32px;
		font-weight: 500;
		text-align: right;
		color: var(--el-text-color-primary);
	}
	.monitor-operlog-info{
		width: auto;
		line-height: 32px;
		padding: 0 10px;
	}
}
</style>